<template>
	<view class="container">
		<form bindsubmit="fabiao">
			<view class="input">
				<textarea maxlength='500' style="height:200rpx" show-confirm-bar="true" type="text"
					placeholder="记下您所感兴趣的谱子与他人一起分享吧~" v-model="content" />
			</view>
			<u-upload ref="uUpload" :action="action" :auto-upload="true" :max-count="countPic"></u-upload>
			<u-button @click="submit">提交</u-button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				countPic: 9,
				action: this.$serverUrl + '/comment/upload'
			}
		},
		methods: {
			// 提交数据
			async submit() {
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;
				files=files.map(item=>{
					return item.response.data.relative_path
				})
				console.log(files)
				let openId = JSON.parse(uni.getStorageSync('info'))["openid"]
				let comment = this.content
				let res = await this.$request({
					url: '/comment/uploadData',
					data: {
						imgFiles: files.join(),
						comment,
						openId,
					},
					method: 'post'
				})
				console.log(res)
				uni.showToast({
					title: '上传成功',
				})
				let timer = setTimeout(() => {
					uni.navigateBack()
					clearTimeout(timer)
				}, 1500)

			},
			// // 上传数据
			// async upload(event) {
			// 	let imgFiles = event.detail.resStr
			// 	let openId = wx.getStorageSync('openId')
			// 	let comment = this.data.content
			// 	let res = await $http({
			// 		url: '/comment/uploadData',
			// 		data: {
			// 			imgFiles,
			// 			comment,
			// 			openId,
			// 		},
			// 		method: 'post'
			// 	})
			// 	console.log(res)
			// 	wx.showToast({
			// 		title: '上传成功',
			// 	})
			// 	let timer = setTimeout(() => {
			// 		wx.navigateBack()
			// 		clearTimeout(timer)
			// 	}, 1500)
			// }
		}
	}
</script>

<style>
	.container {
		box-sizing: border-box;
		padding: 20rpx;
	}

	.input {
		box-sizing: border-box;
		padding: 30rpx;
		width: 100%;
	}

	.file {
		width: 180rpx;
		height: 250rpx;
		background-color: #e8e8e8;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.file image {
		width: 182rpx;
		height: 240rpx;
	}
</style>
